<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时间选择</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/calendar.css" />
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/public.css">
    <style media="screen">
        html,
        body {
            background-color: #fff;
        }

        .date_header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            z-index: 9;
        }

        .date_header .date_header_title {
            height: 4.2rem;
        }

        .close-action {
            padding: 0 0.75rem;
            height: 2.2rem;
        }

        .close-action img {
            width: 1.1rem;
            height: 1.1rem;
        }

        .close-action p {
            padding-left: 0.9rem;
            text-align: center;
            line-height: 2.2rem;
            color: #222224;
            font-size: 0.9rem;
        }

        .week-day {
            height: 2rem;
            box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.05);
        }

        .week-day p {
            text-align: center;
            line-height: 2rem;
        }

        .action {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 5rem;
            z-index: 9;
            background-color: #fff;
            padding: 0.75rem 0.75rem 1rem;
        }

        .result p {
            font-size: 0.6rem;
            margin-bottom: 0.5rem;
        }

        .confirm {
            width: 100%;
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            color: #fff;
            background-color: rgba(0, 202, 207, 1);
            border-radius: 0.2rem;
        }
    </style>
</head>

<body>
    <header class="date_header">
        <div class="date_header_title">
            <div class="close-action" data-flex="box:last cross:center">
                <p>选择日期</p>
                <img onclick="api.closeWin()" src="../../image/mine/calendar_close.png" alt="">
            </div>
            <div class="week-day" data-flex="dir:left box:mean">
                <p>日</p>
                <p>一</p>
                <p>二</p>
                <p>三</p>
                <p>四</p>
                <p>五</p>
                <p>六</p>
            </div>
        </div>
    </header>
    <header>
        <div style="height: 4.2rem;"></div>
    </header>
    <div class="cont">
        <div class="mask_calendar">
            <div class="calendar"></div>
        </div>
    </div>
    <div id="result"></div>
    <div style="height: 5rem;"></div>
    <div class="action public_line_top">
        <div class="result" data-flex="main:justify">
            <p id="startDate">开始日期:</p>
            <p id="endDate">结束日期:</p>
        </div>
        <div onclick="handleConfirm()" class="confirm">确定</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script>
    if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }
</script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script>
    if (window.module) module = window.module;
</script>
<script type="text/javascript" src="../../script/date.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript">
    var index = null;
    var vBottom = 0;
    var startDate = null,
        endDate = null;
    apiready = function() {
        vBottom = api.safeArea.bottom;
        if (api.pageParam.index != null) {
            changeSelectRank(index, api.pageParam.index);
            index = api.pageParam.index;
        }
        startDate = api.pageParam.startDate||"";
        endDate = api.pageParam.endDate||"";
        initPage();
        insertDate();
    }
    
    function initPage() {
        $('#result').calendarSwitch({
            selectors: {
                sections: ".calendar"
            },
            index: 4, //展示的月份个数
            animateFunction: "slideToggle", //动画效果
            controlDay: true, //知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
            daysnumber: -1, //控制天数
            comeColor: "rgba(0, 202, 207, 1)", //入住颜色
            outColor: "rgba(0, 202, 207, 1)", //离店颜色
            comeoutColor: "#F0FBFC", //入住和离店之间的颜色
            comeoutTextColor: '#2A7D78',
            callback: function(_startDate, _endDate, _NumDate) { //回调函数
                // $('.mask_calendar').fadeOut(200);
                // console.log(_startDate);
                // console.log(_endDate);
                // console.log(NumDate);
                if (_startDate) {
                    _startDate = _startDate.replace(/\//g, '-');
                }
                if (_endDate) {
                    _endDate = _endDate.replace(/\//g, '-');
                }
                startDate = _startDate;
                endDate = _endDate;
                insertDate();
            },
            comfireBtn: '.comfire', //确定按钮的class或者id
            startDate: startDate,
            endDate: endDate
        });
    }

    function handleConfirm() {
        if (!startDate || !endDate) {
            var msg = !startDate ? '请选择开始日期' : '请选择结束日期'
            appShowToast(msg);
        } else {
            api.execScript({
                name: 'expenditure_detail_statistics',
                script: 'fnSetTime("'+ startDate +'","'+ endDate +'");'
            });
            api.closeWin();
        }
    }

    function insertDate() {
        $('#startDate').text('开始日期:' + (startDate || ''));
        $('#endDate').text('结束日期:' + (endDate || ''));
    }
</script>

</html>
